<script setup lang="ts">
import {inject, ref} from "vue";
import {Node} from "@antv/x6";
import {ModelApi, ModelVO} from "@/api/ai/model/model";
import {AiModelTypeEnum} from "@/views/ai/utils/constants";
import './node-style.scss'

const formData=reactive<any>({
  modelId:undefined,
  prompt:undefined,
  jsonTemp:undefined,
})
const id=ref<string>()
const getNode=inject<()=>Node>('getNode')
if(getNode){
  const node=getNode()
  id.value=node.id
  node.setData(formData)
}
const models = ref([] as ModelVO[])
const init = async () => {
  models.value = await ModelApi.getModelSimpleList(AiModelTypeEnum.CHAT)
}
onBeforeMount(()=>{
  if(getNode){
    const node=getNode()
    const d=node.getData()
    if (d){
      Object.assign(formData,d)
    }else {
      node.setData(formData)
    }
  }
})
watch(formData,()=>{
  if(getNode){
    const node=getNode()
    node.setData(formData)
  }
},{deep:true,immediate:false})
onMounted(() => {
  init()
})
</script>

<template>
  <div class="node">
    <div class="node-title">
      <div class="line5 ai-node-title">
        <div class="flow-dot" magnet="true" :class="'flow-exec'" x-type="input-exec" :x-id="'input-exec_'+id"></div>
        <div>实体解析</div>
        <div class="flow-dot flow-right flow-exec" magnet="true" x-type="output-exec" :x-id="'output-exec_'+id"></div>
      </div>
    </div>
    <div>
      <div class="line5">
        <div class="flow-dot flow-string" magnet="true" x-type="input-text" :x-id="'input-text_'+id"></div>
        <div>文本</div>
      </div>
      <div class="line5">
        <div class="flow-dot flow-array-string" magnet="true" x-type="input-array-string" :x-id="'input-array-string_'+id"></div>
        <div >参考资料</div>
      </div>
      <div class="line5">
        <div class="flow-dot flow-string" magnet="true" x-type="input-fileId" :x-id="'input-fileId_'+id"></div>
        <div >文件id(算力平台)</div>
      </div>
      <div class="line5">
        <div class="flow-right">实体</div>
        <div class="flow-dot flow-object" magnet="true" x-type="output-json" :x-id="'output-json_'+id" x-key="json"></div>
      </div>
    </div>
    <el-form
      :model="formData"
      label-position="top"
      @mousedown.stop
      @focus.stop
      style="cursor: default"
    >
      <el-form-item label="模型" prop="modelId">
        <el-select v-model="formData.modelId" placeholder="请选择模型" clearable>
          <el-option
            v-for="model in models"
            :key="model.id"
            :label="model.name"
            :value="model.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="打标规范" prop="prompt">
        <el-input
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 5 }"
          v-model="formData.prompt"
        />
      </el-form-item>
      <el-form-item label="json示例" prop="jsonTemp">
        <el-input
          type="textarea"
          :autosize="{ minRows: 3, maxRows: 5 }"
          v-model="formData.jsonTemp"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">

</style>
